<template>
	<view class="v-tabs-column">
		<view class="v-tabs-column__bar" :style="getStyle" >
			<scroll-view scroll-y scroll-with-animation
				style="height: cacl(100vh - 10rpx); background-color: #FFFFFF;flex-direction: column;"
				:scroll-top="scrollTop">
				<view class="v-tabs-column__bar-item" v-for="(v, i) in tabs" :key="i" :style="[
					i == current ? { getActiveStyle } : { getInActiveStyle },
					i == current + 1 ? { borderRadius: '0px 20rpx 0px 0px' } : {},
					i == current - 1 ? { borderRadius: '0px 0rpx 20rpx 0px' } : {}
				]" :class="{ active: i == current }" @click="chooseItem(i)">
					{{ field ? v[field] : v }}
				</view>
				<view style="box-flex: 1;flex: 1 1 0%;background-color: rgb(245, 245, 245);margin-bottom: 180rpx;">
				</view>
			</scroll-view>
		</view>
		<view class="v-tabs-column__container" :style="getWidth" >
			<slot />
			<!-- <view class="footer"></view> -->
		</view>
	</view>
</template>

<script>
	/**
	 * 常用于分类列表页面，展示分类导航使用
	 * @description 常用于分类列表页面，展示分类导航使用
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3275
	 * @version 1.0.0
	 * @property {String} width = '240rpx' 宽度
	 * @property {String} height 高度
	 * @property {String} bg-color = '#f3f3f3' 背景颜色
	 * @property {Array} tabs 数据列表
	 * @property {Boolean} is-tabbar = [true | false] 当有 tabbar 的时候需要设置为 true
	 * @property {String} position = ['left' | 'right'] 位置
	 * @property {String} field 如果使用对象，设置键名
	 * @property {Object, String} inactiveStyle 默认选项样式
	 * @property {Object, String} activeStyle 选中的样式
	 * @property {String} activeColor 选中的文字颜色
	 * @property {String} inactiveColor 默认的文字颜色
	 * @property {String} activeFontSize 选中的文字大小
	 * @property {String} inactiveFontSize 默认的文字大小
	 * @property {String} padding = '30rpx' 内边距
	 * @property {String, Number} bold = 500 选中文字加粗效果
	 *
	 */
	import {
		APP_APPID
	} from "../../utils/constant.js"
	export default {
		props: {
			width: {
				type: String,
				default: "205rpx"
			},
			height: {
				type: String,
				default: ""
			},
			bgColor: {
				type: String,
				default: "#f3f3f3"
			},
			activeBgColor: {
				type: String,
				default: "#fff"
			},
			tabs: {
				// type: Array,
				default () {
					return []
				}
			},
			isTabbar: {
				type: Boolean,
				default: false
			},
			position: {
				type: String,
				default: "left"
			},
			field: {
				type: String,
				default: ""
			},
			inactiveStyle: {
				type: [Object, String],
				default () {
					return {}
				}
			},
			activeStyle: {
				type: [Object, String],
				default () {
					return {}
				}
			},
			activeColor: {
				type: String,
				default: "#333"
			},
			inactiveColor: {
				type: String,
				default: "#333"
			},
			activeFontSize: {
				tyep: String,
				default: "32rpx"
			},
			inactiveFontSize: {
				type: String,
				default: "28rpx"
			},
			padding: {
				type: String,
				default: "30rpx"
			},
			bor: {
				type: String,
				default: "20rpx 0px 0px 20rpx"
			},
			bold: {
				type: [String, Number],
				default: 500
			},
			value: {
				type: [String, Number],
				default: 0
			}
		},
		watch: {
			current(newVal, oldVal) {
				this.$emit("input", newVal)
			},
			value: function(newVal) {
				this.current = newVal
			}
		},
		data() {
			return {
				// current: my.getAppIdSync().appId=='2021003136696039'?-1:0,
				current: 0,
				scrollTop: 0,
				containerHeight: 0,
				items: [], // 缓存
				i: 0,
				appid: APP_APPID,

				// rezuList:[],//同步首页热租榜组件数据
				rezuState: false //从本地存储里面里判断热租组件是否存在
			}
		},
		created() {
			let value111 = uni.getStorageSync('rezuListState');
			console.log("热租榜单是否显示1", value111)
			if (value111) {
				this.rezuState = true
				console.log("热租榜单是否显示2", this.rezuState)
			}
		},
		methods: {
			getHeight() {
				if (this.height) {
					return this.height
				}
				let height = ""
				// 判断是否是 H5
				// #ifdef H5
				height = this.isTabbar ? "calc(100vh - 44px - 50px)" : "calc(100vh - 44px)"
				// #endif
				// #ifndef H5
				height = this.isTabbar ? "calc(100vh - 44px)" : "100vh"
				// #endif

				return height
			},
			chooseItem(index) {
				console.log(index + "====000000");
				if (this.current !== index) {
					this.current = index

					this.$emit("change", index)
					this.setPosition()
				}
			},
			setPosition() {
				const query = uni
					.createSelectorQuery()
					// #ifndef MP-ALIPAY
					.in(this)
				// #endif
				// 如果容器的高度已经存在，不需要再循环
				if (!this.containerHeight) {
					query
						.select(".v-tabs-column__bar")
						.boundingClientRect(data => {
							// 判断属性值存在
							if (data && data.height) {
								this.containerHeight = data.height
							}
						})
						.exec()
				}
				// 缓存有属性，不必每次循环节点
				if (this.items.length <= 0) {
					query
						.selectAll(".v-tabs-column__bar-item")
						.boundingClientRect(data => {
							this.items = data
							this.calcScrollTop()
						})
						.exec()
				} else {
					this.calcScrollTop()
				}
			},
			calcScrollTop() {
				if (this.items) {
					// 每一个 item 的高度都相等，随便取一个即可
					const currentHeight = (this.current + 1) * this.items[0].height
					// 计算滚动条距离顶部的位置
					this.scrollTop = currentHeight - this.containerHeight / 2
				}
			},
			// 将对象转换成字符串: {'font-size': '24rpx'}  ====> 'font-size: 24rpx'
			objToString(obj) {
				let result = ""
				for (let [key, val] of Object.entries(obj)) {
					result += `${key}: ${val};`
				}
				return result
			}
		},
		computed: {
			// 计算 bar 的样式
			getStyle() {
				// 判断是否传入了 height，如果没有，计算一下 height（除去 navbar 和 tabbar）
				return this.objToString({
					// height: this.getHeight(),
					background: this.bgColor,
					left: this.position === "left" ? 0 : "auto",
					right: this.position === "right" ? 0 : "auto"
				})
			},
			// 计算 item 激活样式
			getActiveStyle() {
				return this.objToString(
					Object.assign({
							color: this.activeColor,
							background: this.activeBgColor,
							fontWeight: this.bold,
							borderRadius: this.bor
							// width: "101%"
						},
						this.activeStyle
					)
				)
			},
			// 计算 item 未激活样式
			getInActiveStyle() {
				return this.objToString(
					Object.assign({
							color: this.inactiveColor
						},
						this.inactiveStyle
					)
				)
			},
			// 计算容器区域宽度和内边距
			getWidth() {
				return this.objToString({
					// width: `calc(100vw - ${this.width})`,
					width:'100%',
					"padding-left": this.position == "left" ? this.width : 0
				})
			}
		}
	}

</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.v-tabs-column__bar-item {
		background-color: rgb(245, 245, 245)
	}

	.v-tabs-column {
		position: relative;
		background-color: #FFFFFF;

		// height: 100%;
		display: flex;
		flex-direction: column;
		height: 100vh; // 必须写100vh，小程序上100%可能无法继承高度
		overflow: hidden;

		::-webkit-scrollbar {
			display: none;
			// display: flex;
		}

		&__bar {
			flex: 1;
			position: fixed;
			width: 200rpx;
			float: left;
			max-height: 1285rpx;
			overflow: scroll;
			-webkit-overflow-scrolling: touch;
			//#ifdef MP-WEIXIN
			max-height: calc(100vh - 100rpx);
			// #endif
			overflow: hidden;
			&-item {
				position: relative;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				width: 204rpx;
				text-align: center;
				font-size: 28rpx;
				padding: 32rpx 0;

			}
		}

		.active {
			position: relative;
			background-color: #FFFFFF;

			&:after {
				content: "";
				position: absolute;
				width: 8rpx;
				height: 30rpx;
				@include global-background-color-red();
				border-radius: 6rpx;

				top: 33rpx;
				left: 20rpx;
			}
		}
	}


	.v-tabs-column__container {
		// height: 20%;
		// overflow:overflow-y
	}

	.footer {
		width: 100%;
		height: 50rpx;
		position: fixed;
		background-color: #FFFFFF;

	}

</style>

